﻿@{
    ViewBag.Title = "EditProfile";
}

<h2>Profile</h2>

<br />

<b>Name:</b>
<span style="margin-left: 9%">
    <input type="text" id ="Name" value="@ViewBag.user.Name"/>
</span>
<br />
<br />
<b>Gender:</b>
<span style="margin-left: 8%">
    <select id="Gender">

        @if (ViewBag.user.Gender == "F")
        {
            <option value="F" selected="selected">F</option>
        }
        else
        {
            <option value="F">F</option>
        }

        @if (ViewBag.user.Gender == "M")
        {
            <option value="M" selected="selected">M</option>
        }
        else
        {
            <option value="M">M</option>
        }

    </select>

</span>
<br />
<br />
<b>D.O.B:</b>
<span style="margin-left: 8.6%">
    <input type="date" id ="DOB" value="@ViewBag.DOB"/>
</span>
<br />
<br />
<b>Email:</b>
<span style="margin-left: 9.2%">
    <input type="text" id ="Email" value="@ViewBag.user.Email" readonly="readonly"/>
</span>
<br />
<br />
<b>Current Password:</b>
<span style="margin-left: 0.2%">
    <input type="password" id ="currentPassword"/>
</span>
<br />
<br />
<b>Password:</b>
<span style="margin-left: 6.5%">
    <input type="password" id ="password"/>
</span>
<br />
<br />
<b>Password (Repeat):</b><input type="password" id ="repeatPassword"/>
<br />
<br />

<br />
<br />
<br />
<br />
<br />
<br />
<input type="button" value="Update Profile" onclick="Update()" />


@* -- SCRIPTS -- *@
<script>
    var name = "";
    var gender = "";
    var address = "";
    var ic = "";
    var country = "";
    var password = "";
    var repeatPassword = "";
    var DOB = "";
    var email = "";
    var oldEmail = "@ViewBag.user.Email";
    var currPassword = "";
    var update = false;
    var updatePassword = false;

    function Update() {

        currentPassword = document.getElementById("currentPassword").value;
        password = document.getElementById("password").value;
        repeatPassword = document.getElementById("repeatPassword").value;

        if (currentPassword == "")
            alert("Please key in current password!");
        else {
            if (password != "" || repeatPassword != "") {
                if (password != repeatPassword) {
                    alert("New passwords mismatch");
                    update = false;
                }
                else {
                    update = true;
                    updatePassword = true;
                }

            }
            else {
                update = true;
                updatePassword = false;
            }

            if (update) {
                name = document.getElementById("Name").value;
                gender = document.getElementById("Gender").value;
                DOB = document.getElementById("DOB").value;
                email = document.getElementById("Email").value;

                //check if required fields are not filled up
                if (name == "" || gender == "" || DOB == "" || email == "") {
                    alert("Please fill in all the fields");
                }
                else {
                    UpdatePost();
                }


            }
        }


    }

    function UpdatePost() {
        XMLhttp = new XMLHttpRequest();

        XMLhttp.open("POST", "/User/UpdateProfileAjax", true);
        XMLhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
        XMLhttp.onreadystatechange = UpdateReqReady;
        sendStr = "oldEmail=" + oldEmail + "&name=" + name + "&gender=" + gender + "&DOB=" + DOB + "&email=" + email + "&password=" + password + "&currPassword=" + currentPassword + "&updatePassword=" + updatePassword;
        XMLhttp.send(sendStr);
    }
    

    function UpdateReqReady() {
        if (XMLhttp.readyState == 4 && XMLhttp.status == 200) {
            //status is inside
            alert(XMLhttp.responseText);
            if (XMLhttp.responseText == "Successfully updated profile") {
                document.getElementById("refresh").click();
            }

        } else if (XMLhttp.readyState == 4) {
            alert("error! code: " + XMLhttp.status);
        }
    }
</script>

<form action="/User/EditProfile" method="post">
    <input type="submit" name="submit" id="refresh" hidden="hidden"/>
</form>


